<template>
  <el-row type="flex" justify="center">
    <el-col :span="12">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>测试SSH主机连接是否正常</span>
        </div>
        <el-form ref="form" :model="form" label-width="120px" :rules="rules" label-position="right" @submit.native.prevent="submitForm">
          <!-- 节点主机地址 -->
          <el-form-item label="节点主机地址" prop="sshHost">
            <el-input v-model="form.sshHost" placeholder="x.x.x.x" style="width: 130px;"></el-input>
          </el-form-item>
          <!-- 节点主机端口 -->
          <el-form-item label="节点主机端口" prop="sshPort">
            <el-input v-model="form.sshPort" style="width: 80px;"></el-input>
          </el-form-item>

          <!-- 认证方式 -->
          <el-form-item label="认证方式" prop="sshType" >
            <dict-tag :options="dict.type.edge_nodes_ssh_type" :value="form.sshType" style="margin-left: 15px"/>
            <div v-if="isDisabled" class="overlay"></div>
          </el-form-item>

          <!-- SSH用户名 -->
          <el-form-item label="SSH用户名" prop="sshUser">
            <el-input v-model="form.sshUser" type="text" readonly />
            <div v-if="isDisabled" class="overlay"></div>
          </el-form-item>
          <!-- SSH密码 -->
          <el-form-item label="SSH密码" prop="sshKey">
            <el-input v-model="form.sshKey" type="password" readonly />
            <div v-if="isDisabled" class="overlay"></div>
          </el-form-item>
          <!-- 提交按钮 -->
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交测试</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {checkSsh, getSsh, updateSsh} from "@/api/nodes/ssh";
import dict from "@/utils/dict";
export default {
  name: 'CheckSSH',
  dicts: ['edge_nodes_ssh_type'],
  watch:{
    'form.sshType':{
      handler() {
        if(this.form.sshType!=this.oldSshType){
          this.form.sshKey ='';
          this.oldSshType=this.form.sshType
        }
      },
    }
  },
  data() {
    return {
      form: {
        id: null,
        sshUser: null,
        sshKey: null,
        sshHost: '',
        sshPort: 20289,
        sshName: null,
        sshType: null
      },
      oldSshType:'',
      rules: {
        sshHost: [{ required: true, message: '节点主机地址不能为空', trigger: 'blur' }],
        // sshKey: [{ required: true, message: '请输入SSH密钥', trigger: 'blur' }],
        sshPort: [{ required: true, message: '节点主机端口不能为空', trigger: 'blur' }],
      },
      isDisabled: true,  // 控制是否加遮掩层
    };
  },
  created() {
    const sshId = this.$route.params.id;
    this.loadSshInfo(sshId);
  },
  methods: {
    dict,
    loadSshInfo(id) {
      getSsh(id).then(response => {
        this.form = response.data;
        this.oldSshType=this.form.sshType
      })
    },
    // 提交表单
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$modal.loading("正在测试连接")
          checkSsh(this.form).then(response => {
            this.$message.success("测试连接成功");
          }).finally(()=>{
            this.$modal.closeLoading()
          });
        }
      });
    },
  }
};
</script>

<style scoped>
.box-card {
  margin-top: 20px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.el-form-item {
  position: relative;
}

.el-input[readonly] {
  background-color: #f5f5f5;
  color: #999;
}

.el-input[readonly] .el-input__inner {
  background-color: #f5f5f5;
}

.help-text {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
  display: block;
}

.el-button {
  margin-left: 10px;
}
</style>
